<template>
  <div class="close-order">
    <div v-if="!isDetailPage">
      <sec-desc
        :labelStyle="{ width: '100px' }"
        v-for="(item, index) in datas"
        :key="index"
        :column="3"
        border
        :keyData="columns"
        :data="item"
      ></sec-desc>
    </div>

    <sec-form
      ref="secFormRef"
      :formData="formData"
      :ruleForm="ruleForm"
      :rules="rules"
      :optionData="optionData"
      :hideProp="hideProp"
      :disabledProp="disabledProp"
    >
      <template v-slot:tip>
        <div class="tip" v-if="ruleForm.bpmType">
          {{ bpmTypeData.texts[ruleForm.bpmType] }}
          <a :href="bpmTypeData.urls[ruleForm.bpmType]" target="_blank">{{ bpmTypeData.urls[ruleForm.bpmType] }}</a>
        </div>
      </template>
      <template v-slot:doing>
        <div>本工单已发起过申诉，<a :href="bpmUrl" target="_blank">点此查看</a>审批进度</div>
      </template>
      <template v-slot:hint>
        <div v-if="ruleForm.bpmType" style="line-height: 22px; color: #f56c6c">
          审批完成前，该工单不可进行其他操作（请至“进行中”菜单查找该工单）<br />
          若审批通过，工单进入“已完成”菜单；若审批不通过，请至“进行中”菜单继续操作
        </div>
      </template>
      <template v-slot:operation>
        <div class="opt-btn" v-if="appeal !== '1'">
          <el-button @click="cancelClick">取 消</el-button>
          <el-button type="primary" :loading="loading" @click="confirmClick">确 定</el-button>
        </div>
      </template>
    </sec-form>
  </div>
</template>

<script>
//申诉
import { getBpmAppealUrlApi, getCloseOrderInfo, closeSensitivityWork } from "api/taskCenterApi";
import { getFeModelCfgList } from "api/riskCenterApi";
export default {
  name: "closeOrder",
  props: {
    datas: {
      type: Array,
      default: () => [],
    },
  },
  components: {},
  data() {
    return {
      loading: false,
      provided: false,
      columns: [],
      ruleForm: { bpmType: "", remark: "" },
      optionData: { bpmType: [] },
      disabledProp: { bpmType: false, remark: false },
      hideProp: { tip: false, doing: true, remark: false },
      formData: [
        {
          type: "select",
          label: "申诉原因",
          prop: "bpmType",
          change: () => {
            let item = this.optionData.bpmType.find((item) => item.value === this.ruleForm.bpmType);
            if (item.provided) {
              this.provided = true;
              this.$set(this.rules, "remark", [{ required: true, message: "请选择", trigger: "change" }]);
            } else {
              this.provided = false;
              this.$set(this.rules, "remark", [{ required: false }]);
            }
          },
        },
        { type: "slot", label: "", prop: "tip" },
        { type: "textarea", label: "备注", prop: "remark" },
        { type: "slot", label: "", prop: "doing" },
        { type: "slot", label: "", prop: "hint" },
        { type: "slot", label: "", prop: "operation" },
      ],
      rules: {
        bpmType: [{ required: true, message: "请选择", trigger: "change" }],
      },
      bpmUrl: "",
      bpmTypeData: {
        urls: {},
        texts: {
          // 0: "如果本字段不属于敏感数据，但仍被识别，可以选择本流程，在审核通过后，将自动关闭此工单，后续将不再识别该字段。BPM流程详见：",
          // 1: "如果本字段已被治理（加密、MD5、ID置换、脱敏等），但仍被识别为敏感数据，可以选择本流程，在审核通过后，将自动关闭此工单，后续将不再识别该字段。BPM流程详见：",
          // 2: "如果本数据暂时无法进行治理，可以选择本流程，在审核通过后，将自动关闭此工单，后续将不再发送工单直到安全部重新启动。BPM流程详见：",
          // 3: "如果本数据确认含有敏感信息但判断无需治理（例如测试数据），可以选择本流程，在审核通过后，将自动关闭此工单，后续将不再识别该字段。BPM流程详见：",
        },
      }, //申诉原因
    };
  },
  computed: {
    isDetailPage() {
      return this.$route.query.isDetail;
    },
  },
  created() {
    let { type, source, processId, appeal } = this.datas[0];
    this.type = type;
    this.source = source;
    this.processId = processId;
    this.appeal = appeal;
    this.initFormStatus(); //根据appeal 处理显示隐藏置灰逻辑
    this.initPage();
  },
  mounted() {},
  methods: {
    initPage() {
      console.log("this.datas", this.datas);
      this.getBpmAppealUrl();
      this.getColumns();
      this.getCloseOrderInfo();
    },
    initFormStatus() {
      if (["1", "2"].includes(this.appeal)) {
        this.disabledProp.bpmType = true;
        this.disabledProp.remark = true;
        this.hideProp.tip = true;
        this.hideProp.doing = false;
      } else {
        this.disabledProp.bpmType = false;
        this.disabledProp.remark = false;
        this.hideProp.tip = false;
        this.hideProp.doing = true;
      }
    },
    getCloseOrderInfo() {
      //申诉中 查看结果
      if (["1", "2"].includes(this.appeal)) {
        getCloseOrderInfo({ processId: this.processId }).then((res) => {
          const { data } = res;
          this.ruleForm.bpmType = data.bpmType;
          this.ruleForm.remark = data.remark;
          this.bpmUrl = data.bpmUrl;
        });
      }
    },
    getBpmAppealUrl() {
      getBpmAppealUrlApi({ type: this.type, source: this.source }).then((res) => {
        console.log(res);
        let { urls, options, texts } = res.data;
        this.bpmTypeData.urls = urls;
        this.bpmTypeData.texts = texts;
        this.optionData.bpmType = options;
      });
    },
    getColumns() {
      getFeModelCfgList({ type: this.type, source: this.source, operateType: 3 }).then((res) => {
        this.columns = res.data;
      });
    },
    cancelClick() {
      this.$emit("cancel");
    },
    confirmClick() {
      if (this.provided && !this.ruleForm.remark) {
        this.message.warning({ message: "请输入备注" });
        return;
      }
      if (this.$refs.secFormRef.submitForm) {
        this.loading = true;
        let closeOrderList = this.datas.map((item) => item.processId);
        closeSensitivityWork({
          ...this.ruleForm,
          closeOrderList,
        }).then((res) => {
          this.loading = false;
          let state = this.message.state(res);
          if (!state) return;
          this.$emit("confirm-success");
        });
      }
    },
  },
  watch: {
    "ruleForm.bpmType": {
      immediate: true,
      handler(newVal) {
        this.hideProp.remark = newVal ? false : true;
      },
    },
  },
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.opt-btn {
  text-align: right;
}
.tip {
  line-height: 20px;
}
a {
  color: $color;
}
</style>
